<template>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="50%" @close="handleClose">
        <!-- 内容主体区域 -->
        <el-form :model="formData" :rules="formRules" ref="roleFormRef" label-width="80px">
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="formData.roleName"></el-input>
            </el-form-item>
            <el-form-item label="角色描述" prop="roleDesc">
                <el-input v-model="formData.roleDesc"></el-input>
            </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span class="dialog-footer">
            <el-button @click="resetForm">重置</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { addRoleApi, editRoleApi, getRoleInfoByIdApi } from '@/api/role'
import { message } from '@/utils/functions'

// const props = defineProps({
//     id: {
//         type: String,
//         default: ''
//     }
// })
const id = ref(null)

const emit = defineEmits(['getRoleList'])

// 控制对话框的显示与隐藏
const dialogVisible = ref(false)

// 对话框1表单数据
const formData = reactive({
    roleId: '',
    roleName: '',
    roleDesc: ''
})
//对话框2表单数据
const formDatas = reactive({})//《==============================================

// 动态标题
const dialogTitle = computed(() => id.value ? '编辑角色' : '添加角色')//实际应该用方法传参，这里用的属性传参，AI提示的，难用的一批

// 验证规则
const formRules = {
    roleName: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
        { min: 2, max: 10, message: '角色名称的长度在2-10个字符之间', trigger: 'blur' }
    ],
    roleDesc: [
        { required: true, message: '请输入角色描述', trigger: 'blur' },
        { min: 2, max: 15, message: '角色描述的长度在2-15个字符之间', trigger: 'blur' }
    ]
}

// dom对象
const roleFormRef = ref(null)


// 提交表单
const handleSubmit = () => {
    roleFormRef.value.validate(async valid => {
        if (!valid) return

        try {
            let result//<=================================================
            if (id.value) {
                // 编辑角色
                formData.roleId = id.value
                result = await editRoleApi(formData)
            } else {
                // 添加角色
                result = await addRoleApi(formData)
            }

            message('success', `${dialogTitle.value}成功`)
            dialogVisible.value = false
            emit('getRoleList')
        } catch (error) {
            console.error(error)
            message('error', `操作失败，请稍后再试`)
        }
    })
}

// 重置表单《========================来回定义参数属性
const resetForm = () => {
    if (id.value) {
        // 编辑模式下，将表单重置为formDatas
        Object.assign(formData, formDatas.valid)
        return
    }
    roleFormRef.value.resetFields()
}

// 对话框关闭处理
const handleClose = () => {
    resetForm()
}

// 打开对话框《=================================================
const open = async (row) => {
    dialogVisible.value = true
    if (row) {
        id.value = row.id
        formDatas.valid = row
        // 如果有id，则为编辑模式，获取角色信息并填充表单
        console.log('打开对话框2')
        const data = await getRoleInfoByIdApi(row.id)
        Object.assign(formData, data)
    } else {
        // 如果没有id，则为添加模式，初始化为空
        console.log('打开对话框1')
        Object.assign(formData, { roleId: '', roleName: '', roleDesc: '' })
    }
}

// 关闭对话框
const close = () => {
    dialogVisible.value = false
}

//原本方法传参还有侦听器，现在不用了

defineExpose({
    open,
    close
})
</script>

<style lang="scss" scoped></style>